<template>
  <div class="coupon_warp">
    <!-- 第一排 -->
    <ul class="first_row">
      <li
        :class="{ beign: type == 1, receive: type == 2, over: type == 3 }"
        @click="receiveCoupon(1)"
      >
        <p class="money"><span>¥</span>60</p>
        <p class="decrement">全场满399可用</p>
        <p class="btn" v-if="type == 0">20:00点开抢</p>
        <p class="btn" v-if="type == 1 || type == 3">立抢神券</p>
        <p class="btn" v-if="type == 2">已领取</p>
        <p class="Smectite" v-if="type == 3">
          <span class="left"></span>
          <span class="right"></span>
          已抢光
        </p>
      </li>
    </ul>
    <!-- 第二排 -->
    <ul class="senond_row" :class="{ more: num === 4 }">
      <!-- 一行一个 -->
      <template v-if="num === 1">
        <li
          :class="{
            begin_one: secondType == 0,
            receive_one: secondType == 1,
            over_one: secondType == 2
          }"
          @click="receiveCoupon(1)"
        >
          <div class="content">
            <p class="left"><span>¥</span>10</p>
            <div class="right">
              <p class="decrement">满199可用</p>
              <p class="desc_info more_text">优惠券信息备注...</p>
            </div>
          </div>
          <div class="Smectite" v-if="secondType == 2">
            <span class="left"></span>
            <span class="right"></span>
            已抢光
          </div>
        </li>
      </template>
      <!-- 一行两个 -->
      <template>
        <li
          class="two"
          v-for="index in 2"
          :key="index"
          :class="{
            begin_two: secondType == 0,
            receive_two: secondType == 1,
            over_two: secondType == 2
          }"
          @click="receiveCoupon(1)"
        >
          <div class="content">
            <p class="money"><span>¥</span>10</p>
            <p class="decrement">满199可用</p>
            <p class="desc_info more_text">优惠券信息备注...</p>
          </div>
          <div class="Smectite" v-if="secondType == 2">
            <span class="left"></span>
            <span class="right"></span>
            已抢光
          </div>
        </li>
      </template>
      <!-- 一行三个 -->
      <template>
        <li
          class="three"
          v-for="index in 3"
          :key="index"
          :class="{
            begin_three: secondType == 0,
            receive_three: secondType == 1,
            over_three: secondType == 2
          }"
          @click="receiveCoupon(1)"
        >
          <div class="content">
            <div class="top">
              <p class="money"><span>¥</span>10</p>
              <p class="decrement">满199可用</p>
              <p class="desc_info more_text">优惠券信息备注...</p>
            </div>
            <div class="btn" v-if="secondType == 0 || secondType == 2">
              立即领取
            </div>
            <div class="btn" v-if="secondType == 1">已领取</div>
          </div>
          <div class="Smectite_three" v-if="secondType == 2">
            <span class="left"></span>
            <span class="right"></span>
            已抢光
          </div>
        </li>
      </template>
      <!-- 一行多个 -->
      <template>
        <li
          class="three four"
          v-for="index in 9"
          :key="index"
          :class="{
            begin_three: secondType == 0,
            receive_three: secondType == 1,
            over_three: secondType == 2
          }"
          @click="receiveCoupon(1)"
        >
          <div class="content">
            <div class="top">
              <p class="money"><span>¥</span>10</p>
              <p class="decrement">满199可用</p>
              <p class="desc_info more_text">优惠券信息备注...</p>
            </div>
            <div class="btn" v-if="secondType == 0 || secondType == 2">
              立即领取
            </div>
            <div class="btn" v-if="secondType == 1">已领取</div>
          </div>
          <div class="Smectite_three" v-if="secondType == 2">
            <span class="left"></span>
            <span class="right"></span>
            已抢光
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'coupon',
  props: {
    coupon: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      type: 3, // 0 未开抢  1 开抢  2 已领取 3已抢光
      num: 1, // 根据
      secondType: 0 // 0 立即领取  1已领取 2 已抢光
    };
  },
  methods: {
    receiveCoupon(data) {
      console.log(data);
    }
  }
};
</script>
<style lang="scss" scoped>
.coupon_warp {
  padding: 0 10px;
  box-sizing: border-box;
  .first_row {
    display: flex;
    margin-bottom: 3px;
    li {
      width: 116px;
      height: 69px;
      background-image: url('./../img/coupon/11111_03.png');
      background-repeat: no-repeat;
      background-size: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px 0 5px 0;
      box-sizing: border-box;
      border-radius: 5px;
      overflow: hidden;
      p {
        text-align: center;
      }
      .money {
        font-size: 34px;
        font-family: DIN;
        font-weight: bold;
        color: #ff0e56;
        line-height: 26px;
        height: 26px;
        span {
          font-size: 11px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ff0000;
        }
      }
      .decrement {
        font-size: 9px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: rgba(255, 14, 86, 1);
        // margin: 2px 0 4px 0;
      }
      .btn {
        width: 92px;
        height: 18px;
        border: 1px solid rgba(255, 14, 86, 1);
        border-radius: 9px;
        font-size: 12px;
        transform: scale(0.75);
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: rgba(255, 14, 86, 1);
        line-height: 17px;
        box-sizing: border-box;
      }
    }
    .beign {
      .btn {
        background-color: #ff0e56;
        color: #ffffff;
      }
    }
    .receive {
      background-image: url('./../img/coupon/11111_07.png');
      p {
        color: #a7a7a7;
        span {
          color: #a7a7a7;
        }
      }
      .btn {
        background-color: #a7a7a7;
        color: #ffffff;
        border: none;
      }
    }
    .over {
      position: relative;
      .Smectite {
        display: block;
        width: 116px;
        height: 70px;
        text-align: center;
        position: absolute;
        color: #ffffff;
        // background: rgba(0, 0, 0, 0.5);
        background-image: url('./../img/coupon/1.png');
        background-size: 100%;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        line-height: 70px;
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
      }

      .btn {
        background-color: #ff0e56;
        color: #ffffff;
      }
    }
  }
  .senond_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 355px;
      height: 78px;
      border-radius: 5px;
      background-image: url('./../img/coupon/11111_12.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
      overflow: hidden;
      .content {
        width: 298px;
        height: 78px;
        display: flex;
        justify-content: center;
        align-items: center;
        .left {
          margin-right: 10px;
          height: 49px;
          line-height: 49px;
          span {
            font-size: 25px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #ff0e56;
          }
          font-size: 58px;
          font-family: DIN;
          font-weight: bold;
          color: #ff0e56;
        }
        .right {
          margin-top: 4px;
          .decrement {
            font-size: 18px;
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            // margin-bottom: 5px;
            color: #ff0e56;
          }
          .desc_info {
            font-size: 12px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: rgba(138, 138, 138, 1);
            width: 95px;
          }
        }
      }
      .Smectite {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        position: absolute;
        color: #ffffff;
        // background: rgba(0, 0, 0, 0.5);
        background-image: url('./../img/coupon/2-1.png');
        background-size: 100%;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        line-height: 70px;
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
      }
    }
    .receive_one {
      background-image: url('./../img/coupon/11111_14.png');
      .content {
        .left {
          color: #8a8a8a;
          span {
            color: #8a8a8a;
          }
        }
        .right {
          .decrement {
            color: #8a8a8a;
          }
          color: #8a8a8a;
        }
      }
    }
    .over_one {
      .Smectite {
        font-size: 21px;
        font-family: Alibaba PuHuiTi;
      }
    }
    .two {
      width: 176px;
      height: 78px;
      border-radius: 5px;
      overflow: hidden;
      background-image: url('./../img/coupon/11111_16.png');
      background-repeat: no-repeat;
      background-size: 100%;
      .content {
        width: 128px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 4px 0;
        box-sizing: border-box;
        .money {
          color: #ff0e56;
          font-size: 49px;
          height: 38px;
          line-height: 38px;
          font-family: DIN;
          font-weight: bold;
          span {
            font-size: 21px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            width: 12px;
            height: 15px;
          }
        }
        .decrement {
          font-size: 13px;
          line-height: 13px;
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          color: #ff0e56;
        }
        .desc_info {
          font-size: 10px;
          transform: scale(0.9);
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          color: rgba(138, 138, 138, 1);
        }
      }
      .Smectite {
        font-size: 16px;
        background-image: url('./../img/coupon/2-2.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
    .receive_two {
      background-image: url('./../img/coupon/11111_21.png');
      .content {
        .money {
          color: #8a8a8a;
          span {
            color: #8a8a8a;
          }
        }
        .decrement {
          color: #8a8a8a;
        }
        .desc_info {
          color: #8a8a8a;
        }
      }
    }
    .three {
      width: 116px;
      height: 78px;
      border-radius: 5px;
      overflow: hidden;
      background-image: url('./../img/coupon/11111_23.png');
      background-repeat: no-repeat;
      background-size: 100%;
      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 3px 0;
        .top {
          height: 51px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          // padding: 2px 0;
          box-sizing: border-box;
          .money {
            font-size: 29px;
            font-family: DIN;
            font-weight: bold;
            color: #ff0e56;
            height: 22px;
            line-height: 22px;
            span {
              font-size: 12px;
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
            }
          }
          .decrement {
            font-size: 12px;
            transform: scale(0.75);
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            line-height: 12px;
            color: #ff0e56;
            // margin: 2px 0;
          }
          .desc_info {
            font-size: 12px;
            transform: scale(0.75);
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            color: rgba(138, 138, 138, 1);
          }
        }
        .btn {
          width: 69px;
          height: 16px;
          border: 1px solid rgba(255, 255, 255, 1);
          border-radius: 8px;
          font-size: 12px;
          transform: scale(0.75);
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          line-height: 16px;
        }
      }
    }
    .Smectite_three {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      position: absolute;
      color: #ffffff;
      //   background: rgba(0, 0, 0, 0.5);
      background-image: url('./../img/coupon/2-3.png');
      background-size: 100%;
      background-repeat: no-repeat;
      top: 0;
      left: 0;
      line-height: 70px;
      font-size: 14px;
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 14px;
    }
    .receive_three {
      background-image: url('./../img/coupon/11111_25.png');
      background-repeat: no-repeat;
      background-size: 100%;
      .content {
        .top {
          .money {
            color: #8a8a8a;
          }
          .decrement {
            color: #8a8a8a;
          }
        }
      }
    }
    .four {
      border-radius: 5px;
      overflow: hidden;
      background-image: url('./../img/coupon/11111_29.png');
      background-repeat: no-repeat;
      background-size: 100%;
      width: 103px;
      height: 78px;
      margin-right: 3px;
      .Smectite_three {
        background-image: url('./../img/coupon/2-4.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
    .four.receive_three {
      background-image: url('./../img/coupon/11111_32.png');
    }
  }
  .more {
    display: block;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
    li {
      display: inline-block;
    }
  }
}
.more_text {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  overflow-y: hidden;
}
</style>
